<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="ticket-dialog" v-if="visible">
                <div class="ticket-dialog__mask"></div>
                <div class="ticket-dialog__content">
                    <div class="ticket-dialog__close" @click="onClose">
                        <img :src="`${_oss_}images/icon-close.svg`" />
                    </div>

                    <div class="ticket-dialog__title">门票列表</div>

                    <div class="list">
                        <div class="item" v-for="item in list" :key="item.id">
                            <div class="code-group">
                                <div class="code">{{ item.code }}</div>
                                <el-icon @click="onCopy(item.code)" :size="18" color="#5085fb" style="cursor: pointer">
                                    <CopyDocument />
                                </el-icon>
                            </div>

                            <div class="status">
                                {{ item.useagtime ? "已使用" : "" }}
                            </div>

                            <div class="btn-operate">
                                <div class="text-btn" @click="onShare(item)" v-if="item.is_share == 0">分享</div>

                                <template v-else>
                                    <!--判读是否分享成功 -->
                                    <template v-if="item.share_status == 0">
                                        <div class="text-btn" @click="onShowShare(item)">查看分享</div>
                                        <div class="text-btn" @click="onCancelShare(item)">取消分享</div>
                                    </template>

                                    <span class="finish" v-else>已领取</span>
                                </template>
                            </div>
                        </div>
                    </div>

                    <div class="footer">
                        <div class="btn-close" @click="onClose">关闭</div>
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>

    <LazyDialogTicketShareM ref="dialogTicketRef" />
</template>
<script setup>
import { CopyDocument } from "@element-plus/icons-vue";
import { GetTicketDetail, TicketShare, TicketCancelShare } from "~/api";

const visible = ref(false);
const list = ref([]);
const dialogTicketRef = ref(null);

const work_id = ref(null);

const onClose = () => {
    visible.value = false;
    work_id.value = null;
    list.value = [];
}

const getDetail = async () => {
    const res = await GetTicketDetail({ work_id: work_id.value });

    if (res.code == 200) {
        list.value = res.data;
    }
}

const onCopy = (code) => {
    copy(code);

    Message().success("复制成功");
}

const onShare = async (row) => {
    const res = await TicketShare({ ticket_id: row.id });

    if (res.code == 200) {
        getDetail();
    }
}

const onCancelShare = async (row) => {
    const res = await TicketCancelShare({ ticket_id: row.id });

    if (res.code == 200) {
        getDetail();
    }
}

const onShowShare = (row) => {
    dialogTicketRef.value.open(row.share_code);
}

defineExpose({
    show(id) {
        visible.value = true;
        work_id.value = id;
        getDetail();
    }
})
</script>
<style lang="scss" scoped>
.ticket-dialog {

    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__title {
        font-size: 18px;
        margin-bottom: 10px;
        padding: 0 15px;
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 355px;
        height: 70%;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        padding: 15px 0;

        .list {
            height: calc(100% - 60px);
            overflow: auto;
            padding: 0 15px;

            .item {
                display: flex;
                margin-bottom: 10px;

                .code-group {
                    display: flex;
                    align-items: center;
                    width: 100%;

                    .code {
                        font-size: 14px;
                        width: 80%;
                        white-space: wrap;
                        word-break: break-all;
                    }

                    .el-icon {
                        margin-left: 10px;
                    }
                }

                .btn-operate {
                    width: 120px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .text-btn {
                        color: #5085fb;
                        cursor: pointer;
                        text-align: center;
                        font-size: 14px;
                    }

                    .finish {
                        text-align: center;
                        font-size: 14px;
                    }
                }

                .status {
                    width: 70px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-size: 14px;
                }
            }
        }
    }

    &__close {
        position: absolute;
        top: 0px;
        right: -40px;
        cursor: pointer;

        img {
            width: 30px;
            height: 30px;
        }
    }

    .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;

        .btn-close {
            width: 60px;
            height: 32px;

            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
        }

    }
}
</style>
<style lang="scss">
.ticket-dialog {
    .el-dialog__header {
        display: none;
    }
}
</style>